import React from 'react'
import './index.less'
import { useNavigate } from '@/.umi/exports'
type PropTypes = {
    items: any[]
}

export default function Items(props: PropTypes) {
    const navigate = useNavigate()

    return (
        <div className='home-items'>
            <h5>推荐商品</h5>
            <div className="items">
                {
                    props.items.map(item => (
                        <div
                            key={item.id}
                            className='item'
                        // 点击携带参数ID、跳转详情页
                        onClick={
                            () => {
                                navigate(`/detail?id=${item.id}`)
                            }
                        }
                        >
                            <img src={item.pic} alt="" />
                            <div className="item-info">
                                <h4>{item.name}</h4>
                                <p>￥{item.minPrice}</p>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}
